/*
 * @Date: 2023-05-25 11:20:38
 * @Description: 路由文件
 */

import React, { Fragment, memo, Suspense, useEffect } from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { tabPages, pages, animation, initPage } from '@/pages'
import { navigationRef } from './router'
import { PortalRouteProvider } from '@/components/PortalRoot'
// import SplashScreen from 'react-native-splash-screen' // 启动屏

import { ImageBackground, Pressable, StatusBar, Text, View } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import styles from './styles'
// import { AMapSdk } from 'react-native-amap3d'
// import { AMAP_KEY } from '../config'
// import { actions, store, useSelector } from '../store'
// import PrivacyDialog from '@/components/PrivacyDialog'
// import { useDispatch } from 'react-redux'

// AMapSdk.init(AMAP_KEY)
const Tab = createBottomTabNavigator()
const Stack = createNativeStackNavigator()

function Lazy({ render: Render, ...other }: any) {
  return (
    // <Suspense fallback={['CitySelect', 'Agreements'].includes(other.route.name) ? <></> : <Loading visible />}>
    <Suspense fallback={<></>}>
      <PortalRouteProvider renderToRoute>
        <Render {...other} />
      </PortalRouteProvider>
    </Suspense>
  )
}

function renderTabBar({ state, descriptors, navigation, showRedPoint }:any) {
  return (
    <View style={styles.tabbarContainer}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key]
        const label = options.title
        const tabbarIcon = options.tabBarIcon
        const tabBarActiveTintColor = options.tabBarActiveTintColor

        const isFocused = state.index === index

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          })

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name, route.params)
          }
        }

        return (
          <Pressable onPress={onPress} style={styles.tabbarItem} key={index}>
            <View style={styles.textBox}>
              <Text
                style={[
                  {
                    color: isFocused ? tabBarActiveTintColor : tabBarActiveTintColor.secondary,
                  },
                ]}
              >
                {label}
              </Text>
            </View>
          </Pressable>
        )
      })}
    </View>
  )
}

function AppTabs() {
  const { bottom } = useSafeAreaInsets()
  return (
    <Fragment>
      <StatusBar barStyle='dark-content' translucent backgroundColor={'transparent'} />
      <Tab.Navigator tabBar={(props: any) => renderTabBar({ ...props, showRedPoint: 0 })}>
        {tabPages.map((item) => {
          return (
            <Tab.Screen key={item.name} {...item}>
              {(props: any) => <Lazy {...props} render={item.render} />}
            </Tab.Screen>
          )
        })}
      </Tab.Navigator>
      <View style={{ height: bottom, backgroundColor: '#FFFFFF' }} />
    </Fragment>
  )
}

const pagesKey = Object.keys(pages)

const Router = memo((props: any) => {
  return (
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator initialRouteName={props?.initPage || initPage}>
        {/* tab页面 */}
        <Stack.Screen name='Tab' component={AppTabs} options={{ headerShown: false, animation: 'none' }} />
        {/* 其他页面 */}
        {pagesKey.map((item: any) => {
          return (
            <Stack.Screen
              key={item}
              name={item}
              options={{
                headerShown: false,
                animation,
                // presentation: item === 'CitySelect' || item === 'Agreements' ? 'fullScreenModal' : 'card',
                presentation: 'card'
              }}
            >
              {(props) => <Lazy {...props} render={pages[item]} />}
            </Stack.Screen>
          )
        })}
      </Stack.Navigator>
    </NavigationContainer>
  )
})

export default Router
